<template>
  <div>
    <div class="scroll-wrap">
      <div
        v-for="(item,index) in renderData"
        :key="index"
        class="scroll-item"
        :style="{'background-color':hover === index+1 ? hoverColor : index%2 ===0 ? bgColors[0] :bgColors[1],color:fontColor}"
        @mouseover="hover = index + 1"
      >
        <div v-if="showIndex">{{ index + 1 }}</div>
        <div v-for="(i,idx) in item" :key="idx">
          <div>{{ i }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import autoResize from '../../../mixin/autoResize'
export default {
  name: 'HzxScroll',
  props: {
    renderData: {
      type: Array,
      default: () => []
    },
    lines: {
      type: Number,
      default: () => 5
    },
    duration: {
      type: Number,
      default: () => 2000
    },
    showIndex: {
      type: Boolean,
      default: () => true
    },
    bgColors: {
      type: Array,
      default: () => ['#262626', '#434343']
    },
    hoverColor: {
      type: String,
      default: () => '#595959'
    },
    fontColor: {
      type: String,
      default: () => '#fff'
    }
  },
  data() {
    return {
      inter: '',
      hover: 0
    }
  },
  watch: {},
  mounted() {
    this.init()
    if (this.renderData.length > this.lines) {
      this.inter = setInterval(() => {
        this.scroll()
      }, this.duration)
    }
  },
  beforeDestroy() {
    clearInterval(this.inter)
  },
  methods: {
    init() {
      const h = document.querySelector('.scroll-box').offsetHeight
      document.querySelectorAll('.scroll-item').forEach(item => {
        item.style.height = h / this.lines + 'px'
      })
    },
    scroll() {
      const wrap = document.querySelector('.scroll-wrap')
      const item = document.querySelectorAll('.scroll-item')[0]
      item.remove()
      wrap.appendChild(item)
    }
  }
}
</script>
<style lang="less">
    .scroll-wrap{
        width: 100%;
        display: flex;
        flex-direction: column;
        transition: all .5s ease;
        .scroll-item{
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-wrap: nowrap;
            color:#fff;
            width: 100%;
        }
        .scroll-item-bg1{
            background-color:#1890ff ;
        }
        .scroll-item-bg2{
            background-color:rgb(0,39,50) ;
        }
    }
    @keyframes appear {
        from{transform: translateY(20px);}
        to{transform: translateY(0px);}
    }
</style>
